<template>
  <el-card class="result-card">
    <template #header>
      <div class="card-header">
        <!-- 主要奖励信息区域 -->
        <div class="main-reward-section">
          <div class="reward-icon">
            <div class="icon-container">
              <span class="icon">🎉</span>
            </div>
          </div>
          <div class="reward-details">
            <h2 class="reward-title">奖励明细</h2>
            <div class="total-amount">
              <span class="currency">¥</span>
              <span class="amount">{{ result.totalReward.toFixed(2) }}</span>
              <span class="unit">元</span>
            </div>
            <div class="reward-subtitle">恭喜获得奖励！</div>
          </div>
        </div>

        <!-- 关键指标区域 -->
        <div class="key-metrics">
          <div class="metrics-grid">
            <div class="metric-item primary">
              <div class="metric-icon">🏆</div>
              <div class="metric-content">
                <span class="metric-label">当前排名</span>
                <span class="metric-value">{{ result.currentRank }}</span>
              </div>
            </div>
            <div class="metric-item">
              <div class="metric-icon">📈</div>
              <div class="metric-content">
                <span class="metric-label">上次排名</span>
                <span class="metric-value">{{ result.previousRank || '-' }}</span>
              </div>
            </div>
            <div class="metric-item">
              <div class="metric-icon">📊</div>
              <div class="metric-content">
                <span class="metric-label">总分</span>
                <span class="metric-value">{{ result.total }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分数详情区域 -->
        <div class="score-details">
          <div class="score-item">
            <span class="score-label">核心科目</span>
            <span class="score-value">{{ result.coreTotal }}</span>
          </div>
          <div class="score-item">
            <span class="score-label">综合科目</span>
            <span class="score-value">{{ result.generalTotal }}</span>
          </div>
        </div>
      </div>
    </template>

    <div class="reward-content">
      <!-- 图表区域 -->
      <div class="chart-section">
        <div class="chart-header">
          <h4>奖励构成分析</h4>
          <p>各类型奖励占比分布</p>
        </div>
        <div class="chart-container">
          <div v-if="!result || !rewardComponents.length" class="empty-state">
            <div class="empty-icon">📊</div>
            <h4 class="empty-title">暂无奖励数据</h4>
            <p class="empty-description">请先进行计算以查看奖励构成分析</p>
          </div>
          <echart
            v-else
            :option="chartOption"
            :style="{ height: isMobile ? '250px' : '300px' }"
            autoresize
          />
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-section">
        <div class="table-header">
          <h4>奖励明细</h4>
          <p>详细奖励组成说明</p>
        </div>
        <div class="table-container">
          <div v-if="!result || !rewardComponents.length" class="empty-state">
            <div class="empty-icon">📋</div>
            <h4 class="empty-title">暂无奖励明细</h4>
            <p class="empty-description">完成计算后，这里将显示详细的奖励组成</p>
          </div>
          <el-table
            v-else
            :data="rewardComponents"
            border
            stripe
            :max-height="isMobile ? '300' : '400'"
            class="reward-table"
          >
            <el-table-column prop="name" label="奖励类型" min-width="30%">
              <template #default="{row}">
                <div class="reward-type">
                  <div class="type-icon">
                    <span v-if="row.name === '基础奖励'">💰</span>
                    <span v-else-if="row.name === '额外奖励'">🎁</span>
                    <span v-else>⭐</span>
                  </div>
                  <div class="type-info">
                    <span class="type-name">{{ row.name }}</span>
                    <span class="type-value">{{ row.value }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="组成说明" min-width="70%">
              <template #default="{row}">
                <div class="reward-desc">{{ row.description }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {use} from 'echarts/core'
import {CanvasRenderer} from 'echarts/renderers'
import {PieChart} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  name: 'ResultDisplay',
  components: {
    echart: VChart
  },
  props: {
    result: {
      type: Object,
      required: true
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    chartOption() {
      return {
        title: {
          text: '奖励构成',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 600,
            color: '#303133'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: ¥{c} ({d}%)',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#e4e7ed',
          borderWidth: 1,
          textStyle: {
            color: '#303133'
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
          itemGap: 12,
          textStyle: {
            fontSize: 12,
            color: '#606266'
          }
        },
        series: [{
          name: '奖励构成',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['60%', '50%'],
          data: this.rewardData,
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 2
          }
        }],
        color: ['#67C23A', '#409EFF', '#E6A23C']
      }
    },
    rewardData() {
      return [
        {value: this.result.base, name: '基础奖励'},
        {value: this.result.extra, name: '额外奖励'},
        {value: this.result.special, name: '特殊奖励'}
      ]
    },
    rewardComponents() {
      return [
        {name: '基础奖励', value: "￥" + this.result.base, description: this.result.baseDesc},
        {name: '额外奖励', value: "￥" + this.result.extra, description: this.result.extraDesc},
        {name: '特殊奖励', value: "￥" + this.result.special, description: this.result.specialDesc}
      ]
    }
  }
}
</script>

<style scoped>
/* 卡片样式由全局 .card 提供，这里仅保留内容结构样式 */

/* 头部样式 */
.card-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
}

.main-reward-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) 0;
}

.reward-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-success);
  color: white;
  border-radius: 50%;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-base);
}

.reward-icon:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-heavy);
}

.icon-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: var(--font-size-3xl);
}

.reward-details {
  flex: 1;
}

.reward-title {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  background: var(--gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.total-amount {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.currency {
  font-size: var(--font-size-xl);
  color: var(--success-color);
  font-weight: 600;
}

.amount {
  font-size: var(--font-size-3xl);
  color: var(--success-color);
  font-weight: 700;
  line-height: 1;
}

.unit {
  font-size: var(--font-size-base);
  color: var(--text-light);
}

.reward-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-light);
}

.key-metrics {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  max-width: 600px;
  width: 100%;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-small);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: var(--transition-fast);
}

.metric-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: var(--shadow-light);
}

.metric-item.primary {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
}

.metric-item.primary .metric-label,
.metric-item.primary .metric-value {
  color: white;
}

.metric-item.primary:hover {
  background: var(--gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-light);
}

.metric-icon {
  font-size: var(--font-size-xl);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.metric-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  font-weight: 500;
}

.metric-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.score-details {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-small);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: var(--transition-fast);
}

.score-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: var(--shadow-light);
}

.score-label {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  font-weight: 500;
}

.score-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* 内容区域 */
.reward-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* 图表区域 */
.chart-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.chart-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.chart-header h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.chart-header p {
  margin: 0;
  color: var(--text-light);
  font-size: var(--font-size-base);
}

.chart-container {
  background: white;
  border-radius: var(--border-radius-small);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-light);
}

/* 表格区域 */
.table-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-small);
  padding: var(--spacing-lg);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.table-header {
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.table-header h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.table-header p {
  margin: 0;
  color: var(--text-light);
  font-size: var(--font-size-base);
}

.table-container {
  background: white;
  border-radius: var(--border-radius-small);
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.reward-table {
  margin: 0;
}

.reward-type {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.type-icon {
  font-size: var(--font-size-xl);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(103, 194, 58, 0.1);
  border-radius: 50%;
}

.type-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.type-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.type-value {
  color: var(--success-color);
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.reward-desc {
  color: var(--text-regular);
  line-height: 1.6;
  font-size: var(--font-size-base);
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
  }
  
  .main-reward-section {
    gap: var(--spacing-md);
  }
  
  .reward-title {
    font-size: var(--font-size-xl);
  }
  
  .amount {
    font-size: var(--font-size-2xl);
  }
}

@media screen and (max-width: 768px) {
  .card-header {
    padding: var(--spacing-md) 0;
    gap: var(--spacing-md);
  }
  
  .main-reward-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
  }

  .reward-icon {
    width: 60px;
    height: 60px;
  }

  .icon {
    font-size: var(--font-size-2xl);
  }

  .reward-title {
    font-size: var(--font-size-lg);
  }

  .amount {
    font-size: var(--font-size-xl);
  }

  .unit {
    font-size: var(--font-size-base);
  }

  .reward-subtitle {
    font-size: var(--font-size-sm);
  }

  .key-metrics {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
  }

  .metrics-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    max-width: 300px;
  }
  
  .metric-item {
    padding: var(--spacing-sm);
  }
  
  .metric-icon {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-lg);
  }

  .score-details {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }
  
  .score-item {
    padding: var(--spacing-sm);
  }

  .chart-section,
  .table-section {
    padding: var(--spacing-md);
  }
  
  .chart-header h4,
  .table-header h4 {
    font-size: var(--font-size-base);
  }
  
  .chart-header p,
  .table-header p {
    font-size: var(--font-size-xs);
  }
  
  .reward-type {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .type-icon {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-lg);
  }
  
  .chart-container {
    padding: var(--spacing-sm);
  }
}

@media screen and (max-width: 480px) {
  .card-header {
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-sm);
  }
  
  .main-reward-section {
    gap: var(--spacing-sm);
  }
  
  .reward-icon {
    width: 50px;
    height: 50px;
  }
  
  .icon {
    font-size: var(--font-size-xl);
  }
  
  .reward-title {
    font-size: var(--font-size-base);
  }
  
  .amount {
    font-size: var(--font-size-lg);
  }
  
  .unit {
    font-size: var(--font-size-sm);
  }
  
  .reward-subtitle {
    font-size: var(--font-size-xs);
  }
  
  .metrics-grid {
    max-width: 250px;
    gap: var(--spacing-xs);
  }
  
  .metric-item {
    padding: var(--spacing-xs);
  }
  
  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }
  
  .metric-label {
    font-size: var(--font-size-xs);
  }
  
  .metric-value {
    font-size: var(--font-size-base);
  }
  
  .score-item {
    padding: var(--spacing-xs);
  }
  
  .score-label {
    font-size: var(--font-size-xs);
  }
  
  .score-value {
    font-size: var(--font-size-base);
  }
  
  .reward-type {
    gap: var(--spacing-xs);
  }
  
  .type-icon {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }
  
  .type-name {
    font-size: var(--font-size-sm);
  }
  
  .type-value {
    font-size: var(--font-size-base);
  }
  
  .reward-desc {
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }
  
  .chart-section,
  .table-section {
    padding: var(--spacing-sm);
  }
  
  .chart-header h4,
  .table-header h4 {
    font-size: var(--font-size-sm);
  }
  
  .chart-header p,
  .table-header p {
    font-size: var(--font-size-xs);
  }
  
  .chart-container {
    padding: var(--spacing-xs);
  }
  
  .empty-state {
    padding: var(--spacing-lg);
  }
  
  .empty-icon {
    font-size: var(--font-size-2xl);
  }
  
  .empty-title {
    font-size: var(--font-size-base);
  }
  
  .empty-description {
    font-size: var(--font-size-sm);
  }
}

/* 空状态样式由全局 components.css 提供 */
</style> 